import React from 'react'
import styles from './index.module.scss'
import { PickerView } from 'antd-mobile'
import FilterFooter from '../FilterFooter'

// label 用于展示的, value 收集到提交给后台的
// 非级联的关系, 可以 [数组1, 数组2, 数组3] 直接选择即可,  cascade={false}
// 级联的关系(省市区的关系) 要求: 是树形结构的数据 cascade={true}

// 挂载阶段: constructor render componentDidMount
// 更新阶段: render componentDidUpdate

class FilterPicker extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: this.props.defaultValues,
    }
  }
  // bug: 如果直接点击title切换, 此时FilterPicker没有销毁重建, constructor就没有被再次执行
  // 虽然defaultValues更新了, 但是没有更新到state中去
  // componentDidUpdate(prevProps) {
  //   // console.log('组件更新了, 根据最新的defaultValues展示')
  //   // 如果defaultValues变化了, 更新
  //   if (prevProps.defaultValues !== this.props.defaultValues) {
  //     this.setState({
  //       value: this.props.defaultValues,
  //     })
  //   }
  // }

  cancelBtnClick() {
    this.props.cancel()
  }
  submitBtnClick() {
    // 点击确认时, 应该将用户选择的value, 传递到父组件中统一管理
    this.props.submit(this.state.value)
  }
  handleChange(val) {
    this.setState({
      value: val,
    })
  }
  render() {
    const { cols, data } = this.props
    return (
      <div className={styles['filter-picker']}>
        <PickerView
          cols={cols}
          data={data}
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
        />
        {/* 底部结构, 给两个按钮注册事件 */}
        <FilterFooter
          onCancel={this.cancelBtnClick.bind(this)}
          onSubmit={this.submitBtnClick.bind(this)}
        ></FilterFooter>
      </div>
    )
  }
}

export default FilterPicker
